<template>
  <div :class="className" style="display: flex;flex-direction: row;" :style="{height:height,width:width}">
    <div style="width: 22%;position: relative;top:55px;left:5px"><img
      src="../../../../assets/picc.png"
      class="imgcc"
      width="100%"
    ></div>
    <el-table
      :data="tableDeviceData"
      height="250"
      border
      style="width: 100%;margin-top: 30px;margin-left: 20px;"
    >
      <el-table-column
        align="center"
        prop="strDevicename"
        label="设备名称"
      />
      <el-table-column
        align="center"
        prop="deviceStatus"
        label="设备状态"
      />
      <el-table-column
        align="center"
        prop="strGrantdevicenum"
        label="设备码"
      />
      <el-table-column
        align="center"
        prop="deviceType"
        label="设备类型"
      />
      <el-table-column
        align="center"
        prop="strOrgname"
        label="所属机构"
      />
    </el-table>
  </div>
</template>

<script>
import {
  getDevicetype
} from '../../../../api/codeapi'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      tableDeviceData: []
    }
  },
  created() {
    this.fetchDeviceList()
  },
  methods: {
    fetchDeviceList() {
      getDevicetype({iOrgsysnum:this.$store.getters.iOrgsysnum}).then(res => {
        this.tableDeviceData = res.deviceList
      })
    }
  }
}
</script>
<style type="scss" scoped>
  .className {
    display: flex;
  }

  .spantit {
    font-size: 18px;
  }
</style>
